<template>
  <div class="search">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <div class="top">
      <div class="button" style="position:relative;">
        <input
          id="search"
          class="search-btn"
          placeholder="搜索音乐"
          @focus="changeContent"
          v-model.trim="keyWord"
          type="search"
          @keypress="monitorSearch"
        />
        <img class="search-icon" v-show="!isInput && keyWord == ''" :src="searchPic" alt />
        <img
          class="delete-icon"
          v-show="isInput || keyWord != ''"
          :src="searchPic"
          @click="toSearchResult"
          alt
        />
      </div>
      <div class="search-by space-between" @click="toSearchSinger">
        <span class="left arrow-right">按歌手搜索</span>
        <span class="right space-between">
          <img :src="headPic" alt />
          <img :src="headPic" alt />
          <img :src="headPic" alt />
        </span>
      </div>
      <div class="search-tip-box" @click.stop="hiddenTip" v-if="isInput">
        <!-- 搜索提示框 -->
        <!-- <div class="search-tip" v-show="isInput" id="tipList">
          <div class="item" v-for="item in searchTip" :key="item.id" @click.stop="toSearchResult">
            <span class="txt fs-26">{{item.content}}</span>
            <img class="search-icon2" :src="searchPic" alt />
          </div>
        </div> -->
      </div>
    </div>
    <div class="hot" v-if="hotList && hotList.length != 0">
      <div class="title">热门搜索</div>
      <div class="content">
        <span
          class="tip"
          v-for="item in hotList"
          :key="item.id"
          @click.stop="hotSearchResult(item.search_name)"
        >{{item.search_name}}</span>
      </div>
    </div>
    <div class="older" v-if="historyList && historyList.length != 0">
      <div class="title">
        历史搜索
        <img :src="deletePic" alt @click="showClearModel" />
      </div>
      <div class="content">
        <span
          class="tip"
          v-for="item in historyList"
          :key="item.id"
          @click.stop="hotSearchResult(item.search_name)"
        >{{item.search_name}}</span>
      </div>
    </div>
    <div class="clearModel" @touchmove.prevent @click.stop="closeClearModel" v-show="isShowClear">
      <div class="add-box">
        <div class="title fs-32">确定清空全部历史记录?</div>
        <div class="btn">
          <div class="left fs-32" @click.stop="closeClearModel">取消</div>
          <div class="right fs-32" @click="sureClear">确定</div>
        </div>
      </div>
    </div>
    <!-- <player :isFull="store.isFullPlay"></player> -->
  </div>
</template>

<script>
// 节流函数
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();
import Header from "@/components/header-nav";
export default {
  name: "search",
  data() {
    return {
      store: this.getStore(),
      keyWord: "", //搜索关键字
      isFocus: false,
      isInput: false,
      title: "搜索",
      isBack: true,
      headPic: require("@/assets/index/head-pic.png"),
      deletePic: require("@/assets/index/delete.png"),
      searchPic: require("@/assets/index/search-gray.png"),
      closePic: require("@/assets/index/close.png"),
      searchTip: [
        {
          id: 1,
          content: ""
        }
      ],
      hotList: [], //热门搜索
      // 历史搜索
      historyList: [],
      isShowClear: false //是否显示清除播放列表模态框
    };
  },
  watch: {
    keyWord() {
      delay(() => {
        this.isInput = true;
        this.searchTip[0].content = "搜索~" + this.keyWord;
        if (this.keyWord == "") {
          this.isInput = false;
        }
      }, 0);
    }
  },
  components: {
    Header
  },
  methods: {
    // 跳转到按歌手搜索页面
    toSearchSinger() {
      this.$router.push({
        path: "search-singer",
        query: {}
      });
    },
    // 添加历史搜索记录
    addSearchHistory() {
      const url = this.$host1 + `home/search/addSearchRecord`;
      var params = {
        search: this.keyWord
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 展示清空历史搜索记录
    showClearModel() {
      this.isShowClear = true;
    },
    // 确定清空历史搜索记录
    sureClear() {
      this.isShowClear = false;
      this.clearHistory();
    },
    // 关闭清除历史搜索记录模态框
    closeClearModel() {
      this.isShowClear = false;
    },
    // 获取历史搜索记录
    getHistoryList() {
      const url = this.$host1 + `home/search/historySearchRecord`;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.historyList = res.data.data;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取热门搜索记录
    getHotList() {
      const url = this.$host1 + `home/search/hotSearchRecord`;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.hotList = res.data.data;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    changeContent() {
      // 让input搜索图片和placeholder文本内容一起消失
      if (this.keyWord != "") {
        this.isInput = true;
      }
    },
    // 清空搜索框内容
    clearContent() {
      this.keyWord = "";
    },
    // 隐藏搜索提示框
    hiddenTip() {
      this.isInput = false;
    },
    // 去搜索结果页面
    toSearchResult() {
      this.addSearchHistory();
      this.$router.push({
        path: "search-result",
        query: { keyWord: this.keyWord }
      });
    },
    // 清空历史搜索记录
    clearHistory() {
      const url = this.$host1 + `home/search/delSearchRecord`;
      var params = {};
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getHotList(); //重新获取下热门搜索记录
            this.getHistoryList(); //重新获取下历史搜索记录
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 搜索热门
    hotSearchResult(text) {
      this.keyWord = text;
      this.addSearchHistory();
      this.$router.push({
        path: "search-result",
        query: { keyWord: this.keyWord }
      });
    },
    // 监听软键盘搜素事件
    monitorSearch(e) {
      var keycode = e.keyCode;
      if (keycode == "13") {
        e.preventDefault();
        //请求搜索接口
        if (this.keyWord == "") {
          alert("请输入搜索内容！");
        } else {
          this.$router.push({
            path: "search-result",
            query: { keyWord: this.keyWord }
          });
        }
      }
    }
  },
  created() {
    this.getHotList(); //获取热门搜索记录
    this.getHistoryList(); //获取历史搜索记录
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.search {
  padding-top: 1.3rem;
  box-sizing: border-box;
  background: #ffffff;
  height: 100vh;
  .top {
    position: relative;
    width: 100%;
    height: 1.74rem;
    border-bottom: 0.01rem solid rgba(233, 233, 233, 1);
    padding: 0.15rem 0.25rem 0;
    box-sizing: border-box;
    input::-webkit-input-placeholder {
      text-align: center;
    }
    input[type="search"]::-webkit-search-cancel-button {
      -webkit-appearance: none; //此处去掉默认的小×
    }
    .search-btn {
      position: relative;
      width: 7rem;
      height: 0.58rem;
      line-height: 0.58rem;
      border: 0.015rem solid rgba(153, 153, 153, 1);
      border-radius: 0.29rem;
      font-size: 0.28rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-bottom: 0.45rem;
      text-indent: 0.5rem;
    }
    .search-icon {
      position: absolute;
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.3rem;
      left: 39%;
      top: 0.14rem;
    }
    .search-icon2 {
      right: 0;
      position: absolute;
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.3rem;
      top: 0.14rem;
    }
    .delete-icon {
      right: 0;
      position: absolute;
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.3rem;
      top: 0.15rem;
    }
    .search-by {
      .left {
        font-size: 0.32rem;
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        display: block;
      }
      // 右箭头
      .arrow-right::after {
        position: absolute;
        margin-top: 0.1rem;
        margin-left: 0.21rem;
        content: "";
        width: 0.18rem;
        height: 0.18rem;
        border-right: 0.01rem solid #999;
        border-bottom: 0.01rem solid #999;
        border-top: none;
        border-left: none;
        transform: rotate(-45deg);
      }
      .right {
        width: 0.46rem;
        height: 0.46rem;
        margin-right: 0.46rem;
        img {
          width: 100%;
        }
        img:nth-child(2),
        img:nth-child(3) {
          margin-left: -0.23rem;
        }
      }
    }
    .search-tip-box {
      position: absolute;
      top: 0.9rem;
      left: 0;
      width: 100%;
      height: 78vh;
      background-color: rgba(255, 255, 255, 0.1);
      // 搜索提示框样式
      .search-tip {
        position: absolute;
        z-index: 99;
        top: 0;
        left: 0.4rem;
        width: 90%;
        border-radius: 0.15rem;
        box-shadow: 0.1rem 0.1rem 0.21rem #eee;
        background-color: rgba(245, 245, 245, 1);
        .item {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          height: 0.8rem;
          line-height: 0.8rem;
          border-bottom: 0.01rem solid #eee;
          padding-left: 0.8rem;
          .txt {
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
          }
          .search-icon2 {
            position: absolute;
            left: 0.3rem;
            top: 0.25rem;
          }
        }
      }
    }
  }
  .hot,
  .older {
    box-sizing: border-box;
    padding: 0.64rem 0.23rem 0;
    .title {
      position: relative;
      text-align: left;
      font-weight: bold;
      font-size: 0.28rem;
      color: rgba(68, 68, 68, 1);
      margin-bottom: 0.47rem;
      img {
        position: absolute;
        width: 0.24rem;
        height: 0.28rem;
        top: 0;
        right: 0;
      }
    }
    .content {
      flex-wrap: wrap;
      display: flex;
      .tip {
        display: inline-block;
        margin-right: 0.22rem;
        // width: 1.36rem;
        padding: 0 0.36rem;
        height: 0.54rem;
        line-height: 0.54rem;
        margin-bottom: 0.36rem;
        background: rgba(239, 239, 239, 1);
        border-radius: 0.27rem;
        font-size: 0.26rem;
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
      }
    }
  }

  // 清除播放列表模态框
  .clearModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1999999;
    background-color: rgba(0, 0, 0, 0.5);
    .add-box {
      position: absolute;
      width: 5.2rem;
      // height: 2.2rem;
      background-color: #fff;
      left: 50%;
      top: 25%;
      border-radius: 0.14rem;
      transform: translate(-50%);
      .title {
        width: 100%;
        height: 1.01rem;
        padding: 0.24rem;
        box-sizing: border-box;
        font-weight: 500;
        text-align: center;
        border-bottom: 0.01rem solid #dddddd;
        color: rgba(68, 68, 68, 1);
      }
      .btn {
        display: flex;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        .left,
        .right {
          width: 50%;
          height: 100%;
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }
        .left {
          border-right: 0.01rem solid #dddddd;
        }
      }
    }
  }
}
</style>
